import React from 'react';
import { Card, Row, Col, Statistic, Button } from 'antd';
import { UserOutlined, AppstoreOutlined, SettingOutlined, RocketOutlined } from '@ant-design/icons';
import { useUser } from '../context/UserContext.jsx';
import config from '../config';
import { useNavigate } from 'react-router-dom';

export default function Home() {
  const { user } = useUser();
  const navigate = useNavigate();
  return (
    <div style={{
      padding: 32,
      minHeight: 500,
      background: 'linear-gradient(135deg, #f5f7fa 0%, #e9f0ff 100%)',
      borderRadius: 16
    }}>
      <Row gutter={24} align="middle">
        <Col span={16}>
          <Card variant="borderless" style={{ borderRadius: 16, boxShadow: '0 2px 16px #e5e6eb', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
              <img src={config.LOGO_URL} alt="logo" style={{ height: 64, borderRadius: 12, boxShadow: '0 2px 8px #e5e6eb' }} />
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: '#222d3a', marginBottom: 8 }}>
                  欢迎回来，{user?.username || '用户'}！
                </div>
                <div style={{ fontSize: 16, color: '#666' }}>
                  欢迎使用 {config.PROJECT_NAME}，祝你高效创作，灵感无限！
                </div>
              </div>
            </div>
          </Card>
          <Row gutter={24}>
            <Col span={8}>
              <Card variant="borderless" style={{ borderRadius: 12, textAlign: 'center' }}>
                <Statistic title="我的项目" value={8} prefix={<AppstoreOutlined />} valueStyle={{ fontSize: 28 }} />
              </Card>
            </Col>
            <Col span={8}>
              <Card variant="borderless" style={{ borderRadius: 12, textAlign: 'center' }}>
                <Statistic title="系统设置" value={user?.role === 'admin' ? 1 : 0} prefix={<SettingOutlined />} valueStyle={{ fontSize: 28 }} />
              </Card>
            </Col>
            <Col span={8}>
              <Card variant="borderless" style={{ borderRadius: 12, textAlign: 'center' }}>
                <Statistic title="快捷入口" value={3} prefix={<RocketOutlined />} valueStyle={{ fontSize: 28 }} />
              </Card>
            </Col>
          </Row>
        </Col>
        <Col span={8}>
          <Card variant="borderless" style={{
            borderRadius: 16,
            minHeight: 260,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 16px #e5e6eb'
          }}>
            <UserOutlined style={{ fontSize: 48, color: '#1890ff', marginBottom: 16 }} />
            <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>{user?.username || '未登录'}</div>
            <div style={{ color: '#888', marginBottom: 16 }}>{user?.role ? `角色：${user.role}` : '普通用户'}</div>
            <Button type="primary" shape="round" size="large" onClick={() => navigate('/profile')}>进入个人中心</Button>
          </Card>
        </Col>
      </Row>
    </div>
  );
}